<!DOCTYPE html>
<html lang="en">
<#assign security=JspTaglibs["http://www.springframework.org/security/tags"] />
<head>
    <meta charset="UTF-8">
    <title>管理员管理</title>
    <link rel="stylesheet" href="css/layui.css" media="all">
    <link rel="stylesheet" href="css/doc.css" media="all">
    <link href="css/bootstrap.min.css" rel="stylesheet">
</head>

<body>
<div class="kit-doc">
    <blockquote class="layui-elem-quote">管理员管理</blockquote>
    <table class="layui-table">
        <colgroup>
            <col width="15">
            <col width="60">
            <col width="80">
            <col width="60">
            <col width="60">
            <col width="150">
        </colgroup>
        <thead>
        <tr>
            <th>id</th>
            <th>用户名</th>
            <th>用户昵称</th>
            <th>手机号码</th>
            <th>邮箱</th>
            <th>用户操作</th>
        </tr>
        </thead>
        <tbody>
        <#list users.records as user>
            <tr>
                <td>${user.userId}</td>
                <td>${user.username}</td>
                <td>${user.nickname}</td>
                <td>${user.phone}</td>
                <td>${user.email}</td>
                <td>
                    <@security.authorize access="hasRole('ADMIN')">
                        <button  type="button" class="btn btn-primary" data-toggle="modal" data-target="#add">添加</button>
                        <button  type="button" class="btn btn-warning updateBtn modifyUserBtn" data-toggle="modal" data-target="#update">修改</button>
                        <button class="btn btn-danger deleteUser">删除</button>
                    </@security.authorize>
                </td>
            </tr>
        </#list>

        </tbody>
    </table>
</div>
<div id="demo" style="margin-left: 470px;"></div>
<!-- 添加用户  -->
<div class="modal fade" id="add" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <form method="post" action="/addZyUser">
                <input type="hidden" name="pageNo" value="${users.current}"><#--当前第几页-->
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" ><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="exampleModalLabel">添加用户</h4>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <label for="recipient-name" class="control-label">用户名称:<span style="color: red; font-size: 13px" class="error01"></span></label>
                        <input type="text"  name="username" class="form-control usernamerg" id="recipient-name" required>
                    </div>
                    <div class="form-group">
                        <label for="recipient-name" class="control-label">密码:</label>
                        <input type="password"  name="password" class="form-control" id="recipient-name" required>
                    </div>
                    <div class="form-group">
                        <label for="recipient-pass" class="control-label">用户昵称:</label>
                        <input type="nickname"  name="nickname" class="form-control" id="recipient-pass" required>
                    </div>
                    <div class="form-group">
                        <label for="recipient-pass" class="control-label">手机号码:<span style="color: red; font-size: 13px" class="error02"></span></label>
                        <input type="phone"  name="phone" class="form-control phonerg" id="recipient-pass" required>
                    </div>
                    <div class="form-group">
                        <label for="recipient-pass" class="control-label">邮箱:<span style="color: red; font-size: 13px" class="error03"></span></label>
                        <input type="email"  name="email" class="form-control emailrg" id="recipient-pass" required>
                    </div>
                    <div class="form-group">
                        <label for="recipient-pass" class="control-label">
                        </label>
                    </div>
                    <div class="form-group">
                        <label for="recipient-pass" class="control-label">选择角色:</label><br/>
                        <table class="table">
                            <tr>
                                <td>
                                    <label class="checkbox-inline">
                                        <span style="color:red">全选&emsp;&emsp;</span><input type="checkbox" id="inlineCheckbox1 checkall1">
                                    </label>
                                </td>
                            </tr>
                            <#list roles as role>
                                <tr>
                                    <td>
                                        <label class="checkbox-inline">
                                            <span style="color: #2e6da4">${role.roleInfo}&emsp;&emsp;</span>
                                            <input type="checkbox" id="inlineCheckbox1" name="roleId" class="checkallch1" value="${role.roleId}" onclick="ccc()">
                                        </label>
                                    </td>
                                </tr>
                            </#list>
                        </table>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <input type="submit" class="btn btn-primary" value="添加"/>
                </div>
    </form>
        </div>
    </div>
</div>
<!-- 修改用户  -->
<div class="modal fade" id="update" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <form method="post" action="/updateUser">
                <input type="hidden" name="pageNo" value="${users.current}"><#--当前第几页-->
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" ><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="exampleModalLabel">修改用户</h4>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <label for="recipient-name" class="control-label">用户名称:</label>
                        <input type="text"  name="username" class="form-control updateusername" id="recipient-name" readonly="readonly" required>
                    </div>
                    <div class="form-group">
                        <label for="recipient-name" class="control-label">密码:</label>
                        <input type="password"  name="password" class="form-control" id="recipient-name" required>
                    </div>
                    <div class="form-group">
                        <label for="recipient-pass" class="control-label">用户昵称:</label>
                        <input type="nickname"  name="nickname" class="form-control modifyNickName" id="recipient-pass" required>
                    </div>
                    <div class="form-group">
                        <label for="recipient-pass" class="control-label">手机号码:<span style="color: red; font-size: 13px" class="error05"></span></label>
                        <input type="text"  name="phone" class="form-control phonerg2 modifyPhone" id="recipient-pass" required>
                    </div>
                    <div class="form-group">
                        <label for="recipient-pass" class="control-label">邮箱:<span style="color: red; font-size: 13px" class="error06"></span></label>
                        <input type="text"  name="email" class="form-control emailrg2 modifyEmail" id="recipient-pass" required>
                    </div>
                    <div class="form-group">
                        <label for="recipient-pass" class="control-label">&nbsp;选择角色:</label><br/>
                        <table class="table">
                            <tr>
                                <td>
                                    <label class="checkbox-inline">
                                        <span style="color:red">全选&emsp;&emsp;</span><input type="checkbox" id="inlineCheckbox1 checkall2">
                                    </label>
                                </td>
                            </tr>
                            <#list roles as role>
                                <tr>
                                    <td>
                                        <label class="checkbox-inline">
                                            <span style="color: #2e6da4">${role.roleInfo}&emsp;&emsp;</span>
                                            <input type="checkbox" id="inlineCheckbox1" name="roleId" class="checkallch2" value="${role.roleId}" onclick="ccc()">
                                        </label>
                                    </td>
                                </tr>
                            </#list>
                        </table>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <input type="submit" class="btn btn-primary" value="修改"/>
                </div>
    </form>
        </div>
    </div>
</div>
<script src="js/jquery-3.5.1.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/layui.all.js"></script>
<script type="text/javascript">
    /**
     *添加-全选role
     */
    var all = document.getElementById("inlineCheckbox1 checkall1");
    var allS = document.getElementsByClassName("checkallch1");
    //全选a&&取消全选
    all.onclick = function(){
        for(let i = 0; i < allS.length; i++){
            allS[i].checked = all.checked;
        }
    }
    //有一个没选,把全选取消
    function ccc(){
        let flag = true;
        for(let i = 0; i < allS.length; i++){
            if(allS[i].checked == false){
                flag = false;
                break;
            }
        }
        all.checked = flag;
    }
    /**
     *修改-全选role
     */
    var all2 = document.getElementById("inlineCheckbox1 checkall2");
    var allS2 = document.getElementsByClassName("checkallch2");
    //全选a&&取消全选
    all2.onclick = function(){
        for(let i = 0; i < allS2.length; i++){
            allS2[i].checked = all2.checked;
        }
    }
    //有一个没选,把全选取消
    function ccc(){
        let flag = true;
        for(let i = 0; i < allS2.length; i++){
            if(allS2[i].checked == false){
                flag = false;
                break;
            }
        }
        all2.checked = flag;
    }

    /**
     * 修改user时role的回显
     */
    $('.modifyUserBtn').click(function() {
        let roleInput = $('.checkallch2');// role复选框
        let username = $(this).parents('tr').find('td').eq(1).text();// username
        let nickname = $(this).parents('tr').find('td').eq(2).text();// 昵称
        let phone = $(this).parents('tr').find('td').eq(3).text();// 手机号
        let email = $(this).parents('tr').find('td').eq(4).text();// 邮箱
        //在修改模态框中显示旧的信息
        $('.modifyNickName').val(nickname);
        $('.modifyPhone').val(phone);
        $('.modifyEmail').val(email);
        $.ajax({
            url: URL() + "modifyUserEcho?",
            type: "POST",
            data: "username=" + username,
            success: function(data) {
                // 清除之前旧的checkbox设置
                for (let i=0; i<roleInput.length; i++) {
                    roleInput.get(i).checked = false;
                }
                //根据用户设置对应的菜单回显
                for (let i=0; i<roleInput.length; i++) {
                    $.each(data, function(k,item) {
                        if (roleInput.get(i).getAttribute('value') == item) {
                            roleInput.get(i).checked = true;
                        }
                    });
                }
            }
        });
    });

    //添加-用户名唯一
    $('.usernamerg').blur(function() {
        let username = $('.usernamerg').val();
        $.ajax({
            url: URL() + "register1?",
            type: "GET",
            data: "username=" + username,
            success: function (data) {
                $('.error01').text(data);
            }
        });
    });
    //添加-号码唯一
    $('.phonerg').blur(function() {
        let phone = $('.phonerg').val();
        $.ajax({
            url: URL() + "register2?",
            type: "GET",
            data: "phone=" + phone,
            success: function (data) {
                $('.error02').text(data);
            }
        });
    });
    //添加-邮箱唯一
    $('.emailrg').blur(function() {
        let email = $('.emailrg').val();
        $.ajax({
            url: URL() + "register3?",
            type: "GET",
            data: "email=" + email,
            success: function (data) {
                $('.error03').text(data);
            }
        });
    });

    //修改-用户信息
    $('.updateBtn').click(function() {
        let username = $(this).parents("tr").find("td").eq(1).text();
        $('.updateusername').val(username);
    });
    //修改-号码唯一
    $('.phonerg2').blur(function() {
        let phone = $('.phonerg2').val();
        $.ajax({
            url: URL() + "register2?",
            type: "GET",
            data: "phone=" + phone,
            success: function (data) {
                $('.error05').text(data);
            }
        });
    });
    //修改-邮箱唯一
    $('.emailrg2').blur(function() {
        let email = $('.emailrg2').val();
        $.ajax({
            url: URL() + "register3?",
            type: "GET",
            data: "email=" + email,
            success: function (data) {
                $('.error06').text(data);
            }
        });
    });

    //删除用户
    $('.deleteUser').click(function() {
        let username = $(this).parents("tr").find("td").eq(1).text();
        if (window.confirm("确认删除用户 " + username + " 吗?")) {
            //删除用户
            $.ajax({
                url: URL() + "deleteUser?",
                type: "DELETE",
                data: "username=" + username,
                success: function() {
                    window.location.reload();
                }
            });
        }
    });

    //获取项目路径
    function URL() {
        return window.location.protocol + "//" + window.location.host + "/";
    }

    //分页
    layui.use(['laypage', 'layer'], function(){
        var laypage = layui.laypage
        laypage.render({
            elem: 'demo'
            , theme: '#009688'
            , curr: ${users.current}
            , count: ${users.total}
            , limit: ${users.size}
            , jump: function(obj, first) {//obj.curr,当前第几页
                if (!first) {
                    window.location.href = URL() + "list?pageNo=" + obj.curr;
                }
            }
        });
    });
</script>
</body>

</html>